.badge {
  transition: 0.2s ease-in-out;
  transition-property: background;
  display: inline-flex;
  align-items: center;
  padding: 1px 6px 1px 5px;
  background: var(--background-light);
  border-radius: var(--border-radius);
  color: #949494;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  text-decoration: none;
}

.primary {
  background: var(--color-primary);
  color: #fff;
}

.warning {
  color: var(--color-warning);
}

.danger {
  background: var(--color-error);
  color: #fff;
}

.icon {
  background: transparent;

  svg {
    height: 12px;
  }
}

.link {
  padding: 0;

  &:focus,
  &:hover {
    background: var(--background-light-highlight);
  }
}

.link.primary {
  padding: 0;

  &:focus,
  &:hover {
    background: hsl(var(--accent-hue), 55%, 40%);
  }
}

.link a {
  display: inline-block;
  padding: 1px 6px 1px 5px;
  color: #949494;
  text-decoration: none;
}

.link.primary a {
  color: #fff;
}
